<template>
	<view class="addAddress">
		<view class="top">
			<view class="top-item">
				<input type="text" v-model="contactMan" placeholder="收货人"/>
			</view>
			<view class="top-item">
				<input type="text" v-model="contactPhone" placeholder="联系电话"/>
			</view>
		</view>
		
		<view class="center">
			<view class="top-item">
				<input type="text" :value="pickerText" placeholder="所在地区" disabled="disabled" @click="showSelect"/>
			</view>
			<view class="top-item">
				<textarea value="" placeholder="详细地址" v-model="position" />
			</view>
		</view>
		<button class="bottom-btn" @click="confirmAdd">确认</button>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import provinceData from '../../../components/mpvue-citypicker/city-data/province.js';
	import cityData from '../../../components/mpvue-citypicker/city-data/city.js';
	import areaData from '../../../components/mpvue-citypicker/city-data/area.js';
	import Api from '../../../util/api.js'
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				pickerText: '',
				contactMan:'',
				contactPhone:'',
				position:'',
				province:'',
				city:'',
				area:'',
				addressId:'',
			};
		},
		onLoad(option) {
			if(option.addressId){
				this.addressId = option.addressId;
				Api.fetchPost('/fsbus/M2203',{id:option.addressId}).then(res=>{
					if(res.errorNo == 0){
						var data = res.results.data;
						this.contactMan = data.contactMan;
						this.contactPhone = data.contactPhone;
						this.position = data.position; 
						for(var i=0; i<provinceData.length;i++){
							if(provinceData[i].label == data.province){
								for(var j=0; j<cityData[i].length;j++){
									if(cityData[i][j].label == data.city){
										for(var x=0; x< areaData[i][j].length;x++){
											if(areaData[i][j][x].label == data.area){
												this.$set(this.cityPickerValueDefault, 2, x);
												break;
											}
										}
										this.$set(this.cityPickerValueDefault, 1, j);
										break;
									}
								}
								this.$set(this.cityPickerValueDefault, 0, i);
								break;
							}
						}
						this.pickerText = data.province+' '+ data.city+' '+data.area;
					}
				}).catch(err=>{})
			}
		},
		methods: {
			// 三级联动选择
			confirmAdd(){
				if(this.contactMan == ''){
					uni.showToast({
							title: '收货人不能为空',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				if(this.contactPhone == ''){
					uni.showToast({
							title: '联系电话不能为空',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				if(this.province == '' && this.city == '' && this.area == ''){
					uni.showToast({
							title: '省市区不能为空',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				if(this.position == ''){
					uni.showToast({
							title: '详细地址不能为空',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				
				var url = "";
				var params = {
					contactMan: this.contactMan,
					contactPhone: this.contactPhone,
					province: this.province,
					city: this.city,
					area: this.area,
					position: this.position
				}
				if(this.addressId){
					url = '/fsbus/M2204';
					params.id = this.addressId;
				}else {
					url = "/fsbus/M2201"
				}
				
				Api.fetchPost(url,params).then(res=>{
					if(res.errorNo ==0){
						uni.showToast({
								title: '添加成功',
								duration: 2000
						});
						setTimeout(function(){
							uni.navigateBack({
									delta: 1
							});
						},500)
					}		
				}).catch(err=>{})
			},
			showSelect() {
				this.$refs.mpvueCityPicker.show();
			},
			onCancel(e) {
			},
			onConfirm(e) {
				this.city =e.city;
				this.area=e.area;
				this.province= e.province;
				this.pickerText = e.label;
			}
		}
	}
</script>

<style>
.addAddress {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
}
.top {
	padding: 20upx 30upx;
	background-color: #fff;
}
.top-item {
	width: 100%;
	min-height: 100upx;
}
.top-item input {
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	font-size: 34upx;
}
.top-item textarea {
	height: 200upx;
	font-size: 34upx;
}
.top-item:first-child {
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 30upx;
}
.center {
	padding: 20upx 30upx;
	background-color: #fff;
	margin-top: 20upx;
}
.bottom-btn {
	width: 100%;
	background-color: #4C4C4C;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 120upx;
	line-height: 120upx;
	color: #fff;
	border-radius: 0;
}
</style>
